<template>
    <div class="analysis-container">
        <el-card class="filter-card">
            <div class="filter-header">
                <h3>数据筛选</h3>
                <el-select v-model="taskId" placeholder="选择任务" clearable>
                    <el-option
                        v-for="task in tasks"
                        :key="task.id"
                        :label="task.name"
                        :value="task.id"
                    />
                </el-select>
                <el-select v-model="days" placeholder="时间范围">
                    <el-option label="最近7天" :value="7" />
                    <el-option label="最近30天" :value="30" />
                    <el-option label="最近90天" :value="90" />
                </el-select>
                <el-button type="primary" @click="fetchData" :loading="loading">
                    {{ loading ? '加载中...' : '刷新数据' }}
                </el-button>
            </div>
        </el-card>

        <!-- 基础统计信息 -->
        <el-row :gutter="20" v-if="!loading">
            <el-col :span="6">
                <el-card class="stat-card">
                    <template #header>
                        <div class="card-header">
                            <span>总发帖量</span>
                            <el-tag size="small">统计</el-tag>
                        </div>
                    </template>
                    <div class="stat-content">
                        <h2>{{ visualData?.basic_stats?.total_posts || 0 }}</h2>
                        <div class="stat-trend">
                            <span>较上期</span>
                            <el-tag :type="getTrendType(visualData?.basic_stats?.post_growth)">
                                {{ formatTrend(visualData?.basic_stats?.post_growth) }}
                            </el-tag>
                        </div>
                    </div>
                </el-card>
            </el-col>
            <el-col :span="6">
                <el-card class="stat-card">
                    <template #header>
                        <div class="card-header">
                            <span>互动总量</span>
                            <el-tag size="small" type="success">统计</el-tag>
                        </div>
                    </template>
                    <div class="stat-content">
                        <h2>{{ visualData?.engagement_stats?.totals?.total || 0 }}</h2>
                        <div class="stat-trend">
                            <span>较上期</span>
                            <el-tag :type="getTrendType(visualData?.engagement_stats?.growth)">
                                {{ formatTrend(visualData?.engagement_stats?.growth) }}
                            </el-tag>
                        </div>
                    </div>
                </el-card>
            </el-col>
            <el-col :span="6">
                <el-card class="stat-card">
                    <template #header>
                        <div class="card-header">
                            <span>活跃用户</span>
                            <el-tag size="small" type="warning">统计</el-tag>
                        </div>
                    </template>
                    <div class="stat-content">
                        <h2>{{ visualData?.basic_stats?.active_users || 0 }}</h2>
                        <div class="stat-trend">
                            <span>较上期</span>
                            <el-tag :type="getTrendType(visualData?.basic_stats?.user_growth)">
                                {{ formatTrend(visualData?.basic_stats?.user_growth) }}
                            </el-tag>
                        </div>
                    </div>
                </el-card>
            </el-col>
            <el-col :span="6">
                <el-card class="stat-card">
                    <template #header>
                        <div class="card-header">
                            <span>平均互动率</span>
                            <el-tag size="small" type="info">统计</el-tag>
                        </div>
                    </template>
                    <div class="stat-content">
                        <h2>{{ formatPercentage(visualData?.engagement_stats?.avg_rate) }}</h2>
                        <div class="stat-trend">
                            <span>较上期</span>
                            <el-tag :type="getTrendType(visualData?.engagement_stats?.rate_growth)">
                                {{ formatTrend(visualData?.engagement_stats?.rate_growth) }}
                            </el-tag>
                        </div>
                    </div>
                </el-card>
            </el-col>
        </el-row>

        <!-- 图表区域 -->
        <el-row :gutter="20" class="chart-row" v-if="!loading">
            <!-- 互动趋势图 -->
            <el-col :span="12">
                <el-card class="chart-card">
                    <template #header>
                        <div class="card-header">
                            <span>互动趋势分析</span>
                            <el-radio-group v-model="trendType" size="small">
                                <el-radio-button label="daily">日趋势</el-radio-button>
                                <el-radio-button label="hourly">小时趋势</el-radio-button>
                            </el-radio-group>
                        </div>
                    </template>
                    <div class="chart-container">
                        <v-chart :option="getTrendChartOption()" autoresize />
                    </div>
                </el-card>
            </el-col>

            <!-- 情感分析图 -->
            <el-col :span="12">
                <el-card class="chart-card">
                    <template #header>
                        <div class="card-header">
                            <span>情感分析</span>
                            <el-radio-group v-model="sentimentType" size="small">
                                <el-radio-button label="overall">整体情感</el-radio-button>
                                <el-radio-button label="trend">情感趋势</el-radio-button>
                            </el-radio-group>
                        </div>
                    </template>
                    <div class="chart-container">
                        <v-chart :option="getSentimentChartOption()" autoresize />
                    </div>
                </el-card>
            </el-col>
        </el-row>

        <!-- 用户分析 -->
        <el-row :gutter="20" class="chart-row" v-if="!loading">
            <!-- 用户活跃度分布 -->
            <el-col :span="12">
                <el-card class="chart-card">
                    <template #header>
                        <div class="card-header">
                            <span>用户活跃度分布</span>
                        </div>
                    </template>
                    <div class="chart-container">
                        <v-chart :option="getUserActivityOption()" autoresize />
                    </div>
                </el-card>
            </el-col>

            <!-- 用户影响力排行 -->
            <el-col :span="12">
                <el-card class="chart-card">
                    <template #header>
                        <div class="card-header">
                            <span>用户影响力排行</span>
                            <el-select v-model="influenceMetric" size="small" style="width: 120px">
                                <el-option label="粉丝数" value="followers" />
                                <el-option label="互动量" value="engagement" />
                                <el-option label="发帖量" value="posts" />
                            </el-select>
                        </div>
                    </template>
                    <div class="chart-container">
                        <v-chart :option="getUserInfluenceOption()" autoresize />
                    </div>
                </el-card>
            </el-col>
        </el-row>

        <!-- 内容分析 -->
        <el-row :gutter="20" class="chart-row" v-if="!loading">
            <!-- 热门话题分析 -->
            <el-col :span="12">
                <el-card class="chart-card">
                    <template #header>
                        <div class="card-header">
                            <span>热门话题分析</span>
                        </div>
                    </template>
                    <div class="chart-container">
                        <v-chart :option="getTopicAnalysisOption()" autoresize />
                    </div>
                </el-card>
            </el-col>

            <!-- 关键词云图 -->
            <el-col :span="12">
                <el-card class="chart-card">
                    <template #header>
                        <div class="card-header">
                            <span>关键词云图</span>
                        </div>
                    </template>
                    <div class="chart-container">
                        <v-chart :option="getWordCloudOption()" autoresize />
                    </div>
                </el-card>
            </el-col>
        </el-row>

        <!-- 高级分析 -->
        <el-card class="analysis-card" v-if="!loading">
            <template #header>
                <div class="card-header">
                    <span>高级分析</span>
                </div>
            </template>
            <el-tabs v-model="activeAnalysis">
                <el-tab-pane label="用户画像分析" name="userProfile">
                    <div class="analysis-content">
                        <el-descriptions :column="3" border>
                            <el-descriptions-item label="用户性别分布">
                                {{ formatPercentage(visualData?.user_profile?.gender?.male) }} 男 / 
                                {{ formatPercentage(visualData?.user_profile?.gender?.female) }} 女
                            </el-descriptions-item>
                            <el-descriptions-item label="用户年龄分布">
                                主要年龄段: {{ visualData?.user_profile?.age?.main || 'N/A' }}
                            </el-descriptions-item>
                            <el-descriptions-item label="地域分布">
                                TOP3: {{ formatTopRegions(visualData?.user_profile?.regions) }}
                            </el-descriptions-item>
                            <el-descriptions-item label="活跃时间">
                                高峰期: {{ visualData?.user_profile?.active_time?.peak || 'N/A' }}
                            </el-descriptions-item>
                            <el-descriptions-item label="兴趣标签">
                                {{ formatTags(visualData?.user_profile?.interests) }}
                            </el-descriptions-item>
                            <el-descriptions-item label="设备偏好">
                                {{ formatDevices(visualData?.user_profile?.devices) }}
                            </el-descriptions-item>
                        </el-descriptions>
                    </div>
                </el-tab-pane>
                <el-tab-pane label="传播分析" name="spreadAnalysis">
                    <div class="analysis-content">
                        <el-descriptions :column="3" border>
                            <el-descriptions-item label="平均传播深度">
                                {{ visualData?.spread_analysis?.avg_depth || 'N/A' }}
                            </el-descriptions-item>
                            <el-descriptions-item label="平均传播速度">
                                {{ visualData?.spread_analysis?.avg_speed || 'N/A' }}/小时
                            </el-descriptions-item>
                            <el-descriptions-item label="关键传播者">
                                {{ formatKeyUsers(visualData?.spread_analysis?.key_spreaders) }}
                            </el-descriptions-item>
                            <el-descriptions-item label="最大传播范围">
                                {{ visualData?.spread_analysis?.max_reach || 'N/A' }}
                            </el-descriptions-item>
                            <el-descriptions-item label="传播效率">
                                {{ formatPercentage(visualData?.spread_analysis?.efficiency) }}
                            </el-descriptions-item>
                            <el-descriptions-item label="热点持续时间">
                                {{ visualData?.spread_analysis?.duration || 'N/A' }}小时
                            </el-descriptions-item>
                        </el-descriptions>
                    </div>
                </el-tab-pane>
                <el-tab-pane label="竞品分析" name="competitorAnalysis">
                    <div class="analysis-content">
                        <el-descriptions :column="3" border>
                            <el-descriptions-item label="竞品提及度">
                                {{ formatCompetitorMentions(visualData?.competitor_analysis?.mentions) }}
                            </el-descriptions-item>
                            <el-descriptions-item label="情感对比">
                                {{ formatSentimentComparison(visualData?.competitor_analysis?.sentiment) }}
                            </el-descriptions-item>
                            <el-descriptions-item label="互动量对比">
                                {{ formatEngagementComparison(visualData?.competitor_analysis?.engagement) }}
                            </el-descriptions-item>
                            <el-descriptions-item label="话题重叠度">
                                {{ formatPercentage(visualData?.competitor_analysis?.topic_overlap) }}
                            </el-descriptions-item>
                            <el-descriptions-item label="用户重叠度">
                                {{ formatPercentage(visualData?.competitor_analysis?.user_overlap) }}
                            </el-descriptions-item>
                            <el-descriptions-item label="市场份额">
                                {{ formatMarketShare(visualData?.competitor_analysis?.market_share) }}
                            </el-descriptions-item>
                        </el-descriptions>
                    </div>
                </el-tab-pane>
            </el-tabs>
        </el-card>
    </div>
</template>

<script setup>
import { ref, onMounted, computed } from 'vue'
import { use } from 'echarts/core'
import { CanvasRenderer } from 'echarts/renderers'
import { 
    LineChart, BarChart, PieChart, RadarChart, 
    ScatterChart, HeatmapChart 
} from 'echarts/charts'
import {
    TitleComponent, TooltipComponent, LegendComponent,
    GridComponent, DataZoomComponent, ToolboxComponent,
    VisualMapComponent
} from 'echarts/components'
import VChart from 'vue-echarts'
import { ElMessage } from 'element-plus'
import { analysisApi } from '@/api/analysis'
import 'echarts-wordcloud'

// 注册必需的组件
use([
    CanvasRenderer,
    LineChart,
    BarChart,
    PieChart,
    RadarChart,
    ScatterChart,
    HeatmapChart,
    TitleComponent,
    TooltipComponent,
    LegendComponent,
    GridComponent,
    DataZoomComponent,
    ToolboxComponent,
    VisualMapComponent
])

// 响应式数据
const loading = ref(false)
const taskId = ref('')
const days = ref(7)
const tasks = ref([])
const visualData = ref(null)
const trendType = ref('daily')
const sentimentType = ref('overall')
const influenceMetric = ref('followers')
const activeAnalysis = ref('userProfile')

// 获取任务列表
const fetchTasks = async () => {
    try {
        const response = await analysisApi.getTasks()
        tasks.value = response.results || []
    } catch (error) {
        console.error('Error fetching tasks:', error)
        ElMessage.error('获取任务列表失败')
    }
}

// 获取可视化数据
const fetchData = async () => {
    loading.value = true
    try {
        console.log('Fetching visualization data with params:', {
            task_id: taskId.value,
            days: days.value
        })
        const response = await analysisApi.getWeiboVisualization({
            task_id: taskId.value,
            days: days.value
        })
        console.log('Received visualization data:', response)
        
        if (!response) {
            console.warn('No response received from API')
            ElMessage.warning('未获取到数据')
            return
        }
        
        // 检查各个数据部分
        if (response.daily_trend) {
            console.log('Daily trend data:', response.daily_trend)
        } else {
            console.warn('No daily trend data available')
        }
        
        if (response.keyword_distribution) {
            console.log('Keyword distribution data:', response.keyword_distribution)
        } else {
            console.warn('No keyword distribution data available')
        }
        
        if (response.engagement_stats) {
            console.log('Engagement stats:', response.engagement_stats)
        } else {
            console.warn('No engagement stats available')
        }
        
        if (response.top_topics) {
            console.log('Top topics data:', response.top_topics)
        } else {
            console.warn('No top topics data available')
        }
        
        if (response.user_activity) {
            console.log('User activity data:', response.user_activity)
        } else {
            console.warn('No user activity data available')
        }
        
        visualData.value = response
    } catch (error) {
        console.error('Error fetching visualization data:', error)
        if (error.response) {
            console.error('Error response:', error.response)
            ElMessage.error(`获取数据失败: ${error.response.data?.message || '未知错误'}`)
        } else if (error.request) {
            console.error('No response received:', error.request)
            ElMessage.error('服务器未响应，请检查网络连接')
        } else {
            console.error('Error details:', error)
            ElMessage.error('请求发生错误')
        }
    } finally {
        loading.value = false
    }
}

// 格式化工具函数
const formatTrend = (value) => {
    if (!value) return '0%'
    return `${value > 0 ? '+' : ''}${value}%`
}

const formatPercentage = (value) => {
    if (!value && value !== 0) return 'N/A'
    return `${value}%`
}

const getTrendType = (value) => {
    if (!value) return ''
    return value > 0 ? 'success' : value < 0 ? 'danger' : 'info'
}

const formatTopRegions = (regions) => {
    if (!regions || !Array.isArray(regions)) return 'N/A'
    return regions.slice(0, 3).join('、')
}

const formatTags = (tags) => {
    if (!tags || !Array.isArray(tags)) return 'N/A'
    return tags.join('、')
}

const formatDevices = (devices) => {
    if (!devices) return 'N/A'
    return Object.entries(devices)
        .map(([key, value]) => `${key}: ${value}%`)
        .join('、')
}

const formatKeyUsers = (users) => {
    if (!users || !Array.isArray(users)) return 'N/A'
    return users.slice(0, 3).map(u => u.name).join('、')
}

const formatCompetitorMentions = (mentions) => {
    if (!mentions) return 'N/A'
    return Object.entries(mentions)
        .map(([key, value]) => `${key}: ${value}次`)
        .join('、')
}

const formatSentimentComparison = (sentiment) => {
    if (!sentiment) return 'N/A'
    return Object.entries(sentiment)
        .map(([key, value]) => `${key}: ${value}`)
        .join(' vs ')
}

const formatEngagementComparison = (engagement) => {
    if (!engagement) return 'N/A'
    return Object.entries(engagement)
        .map(([key, value]) => `${key}: ${value}`)
        .join(' vs ')
}

const formatMarketShare = (share) => {
    if (!share) return 'N/A'
    return Object.entries(share)
        .map(([key, value]) => `${key}: ${value}%`)
        .join('、')
}

// 图表配置函数
const getTrendChartOption = () => {
    const data = visualData.value?.daily_trend || {}
    console.log('Preparing trend chart with data:', data)
    
    if (!data.dates || !data.posts || !data.reposts || !data.comments || !data.likes) {
        console.warn('Missing required trend data')
        return {
            title: {
                text: '暂无数据',
                left: 'center',
                top: 'center'
            }
        }
    }
    
    return {
        title: {
            text: '互动趋势分析',
            left: 'center'
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'cross',
                label: {
                    backgroundColor: '#6a7985'
                }
            }
        },
        legend: {
            data: ['发帖量', '转发', '评论', '点赞'],
            top: 30
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: data.dates,
            axisLabel: {
                rotate: 45
            }
        },
        yAxis: {
            type: 'value'
        },
        series: [
            {
                name: '发帖量',
                type: 'line',
                data: data.posts,
                smooth: true,
                areaStyle: {
                    opacity: 0.1
                }
            },
            {
                name: '转发',
                type: 'line',
                data: data.reposts,
                smooth: true
            },
            {
                name: '评论',
                type: 'line',
                data: data.comments,
                smooth: true
            },
            {
                name: '点赞',
                type: 'line',
                data: data.likes,
                smooth: true
            }
        ]
    }
}

const getSentimentChartOption = () => {
    const data = visualData.value?.sentiment_analysis || {}
    console.log('Preparing sentiment chart with data:', data)
    
    if (sentimentType.value === 'overall') {
        if (!data.positive && !data.neutral && !data.negative) {
            console.warn('No sentiment data available')
            return {
                title: {
                    text: '暂无数据',
                    left: 'center',
                    top: 'center'
                }
            }
        }
        
        return {
            title: {
                text: '情感分布',
                left: 'center'
            },
            tooltip: {
                trigger: 'item',
                formatter: '{b}: {c} ({d}%)'
            },
            legend: {
                orient: 'vertical',
                left: 'left',
                top: 'middle'
            },
            series: [
                {
                    type: 'pie',
                    radius: ['40%', '70%'],
                    avoidLabelOverlap: false,
                    itemStyle: {
                        borderRadius: 10,
                        borderColor: '#fff',
                        borderWidth: 2
                    },
                    label: {
                        show: true,
                        formatter: '{b}: {c} ({d}%)'
                    },
                    emphasis: {
                        label: {
                            show: true,
                            fontSize: '20',
                            fontWeight: 'bold'
                        }
                    },
                    data: [
                        { value: data.positive || 0, name: '正面' },
                        { value: data.neutral || 0, name: '中性' },
                        { value: data.negative || 0, name: '负面' }
                    ]
                }
            ]
        }
    }
    
    // 情感趋势
    if (!data.dates || !data.positive_trend || !data.neutral_trend || !data.negative_trend) {
        console.warn('No sentiment trend data available')
        return {
            title: {
                text: '暂无数据',
                left: 'center',
                top: 'center'
            }
        }
    }
    
    return {
        title: {
            text: '情感趋势',
            left: 'center'
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'cross',
                label: {
                    backgroundColor: '#6a7985'
                }
            }
        },
        legend: {
            data: ['正面', '中性', '负面'],
            top: 30
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: data.dates,
            axisLabel: {
                rotate: 45
            }
        },
        yAxis: {
            type: 'value',
            axisLabel: {
                formatter: '{value}%'
            }
        },
        series: [
            {
                name: '正面',
                type: 'line',
                data: data.positive_trend,
                smooth: true,
                areaStyle: {
                    opacity: 0.1
                }
            },
            {
                name: '中性',
                type: 'line',
                data: data.neutral_trend,
                smooth: true,
                areaStyle: {
                    opacity: 0.1
                }
            },
            {
                name: '负面',
                type: 'line',
                data: data.negative_trend,
                smooth: true,
                areaStyle: {
                    opacity: 0.1
                }
            }
        ]
    }
}

const getUserActivityOption = () => {
    const data = visualData.value?.user_activity || {}
    console.log('Preparing user activity chart with data:', data)
    
    if (!data.users || !data.posts || !data.engagement) {
        console.warn('No user activity data available')
        return {
            title: {
                text: '暂无数据',
                left: 'center',
                top: 'center'
            }
        }
    }
    
    return {
        title: {
            text: '用户活跃度分布',
            left: 'center'
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            }
        },
        legend: {
            data: ['发帖量', '互动量'],
            top: 30
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: {
            type: 'value'
        },
        yAxis: {
            type: 'category',
            data: data.users,
            axisLabel: {
                width: 100,
                overflow: 'truncate'
            }
        },
        series: [
            {
                name: '发帖量',
                type: 'bar',
                data: data.posts
            },
            {
                name: '互动量',
                type: 'bar',
                data: data.engagement
            }
        ]
    }
}

const getUserInfluenceOption = () => {
    const data = visualData.value?.user_influence || {}
    return {
        title: {
            text: '用户影响力排行'
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            }
        },
        xAxis: {
            type: 'value'
        },
        yAxis: {
            type: 'category',
            data: data.users || []
        },
        series: [
            {
                type: 'bar',
                data: data[influenceMetric.value] || []
            }
        ]
    }
}

const getTopicAnalysisOption = () => {
    const data = visualData.value?.top_topics || {}
    console.log('Preparing topic analysis chart with data:', data)
    
    if (!data.topics || !data.counts) {
        console.warn('No topic analysis data available')
        return {
            title: {
                text: '暂无数据',
                left: 'center',
                top: 'center'
            }
        }
    }
    
    return {
        title: {
            text: '热门话题分析',
            left: 'center'
        },
        tooltip: {
            trigger: 'item',
            formatter: '{b}: {c} ({d}%)'
        },
        series: [
            {
                type: 'pie',
                radius: ['40%', '70%'],
                center: ['50%', '60%'],
                data: data.topics.map((topic, index) => ({
                    name: topic,
                    value: data.counts[index]
                })),
                emphasis: {
                    itemStyle: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                },
                label: {
                    show: true,
                    formatter: '{b}: {c}'
                }
            }
        ]
    }
}

const getWordCloudOption = () => {
    const data = visualData.value?.word_cloud || []
    console.log('Preparing word cloud chart with data:', data)
    
    if (!data || data.length === 0) {
        console.warn('No word cloud data available')
        return {
            title: {
                text: '暂无数据',
                left: 'center',
                top: 'center'
            }
        }
    }
    
    return {
        title: {
            text: '关键词云图',
            left: 'center'
        },
        tooltip: {
            show: true
        },
        series: [{
            type: 'wordCloud',
            shape: 'circle',
            left: 'center',
            top: 'center',
            width: '70%',
            height: '80%',
            right: null,
            bottom: null,
            sizeRange: [12, 60],
            rotationRange: [-90, 90],
            rotationStep: 45,
            gridSize: 8,
            drawOutOfBound: false,
            textStyle: {
                fontFamily: 'sans-serif',
                fontWeight: 'bold',
                color: function () {
                    return 'rgb(' + [
                        Math.round(Math.random() * 160),
                        Math.round(Math.random() * 160),
                        Math.round(Math.random() * 160)
                    ].join(',') + ')'
                }
            },
            emphasis: {
                focus: 'self',
                textStyle: {
                    shadowBlur: 10,
                    shadowColor: '#333'
                }
            },
            data: data.map(item => ({
                name: item.word,
                value: item.weight,
                textStyle: {
                    color: item.color
                }
            }))
        }]
    }
}

// 生命周期钩子
onMounted(() => {
    fetchTasks()
    fetchData()
})
</script>

<style scoped>
.analysis-container {
    padding: 20px;
}

.filter-card {
    margin-bottom: 20px;
}

.filter-header {
    display: flex;
    align-items: center;
    gap: 16px;
}

.stat-card {
    margin-bottom: 20px;
}

.stat-content {
    text-align: center;
}

.stat-content h2 {
    margin: 10px 0;
    font-size: 24px;
    color: #303133;
}

.stat-trend {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    color: #909399;
    font-size: 14px;
}

.chart-row {
    margin-bottom: 20px;
}

.chart-card {
    margin-bottom: 20px;
}

.chart-container {
    height: 400px;
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.analysis-content {
    padding: 20px 0;
}

:deep(.el-descriptions) {
    margin-bottom: 20px;
}

:deep(.el-descriptions-item__label) {
    width: 120px;
    font-weight: bold;
}

@media screen and (max-width: 768px) {
    .analysis-container {
        padding: 12px;
    }
    
    .filter-header {
        flex-direction: column;
        align-items: stretch;
    }
    
    .chart-container {
        height: 300px;
    }
}
</style> 